<template>
    <div id="nav" class="nav">
        <router-link to="/">首页</router-link>
        <router-link to="/notes">随笔</router-link>
        <router-link to="/project">项目</router-link>
        <router-link to="/message">留言</router-link>
        <router-link to="/about">关于我</router-link>
    </div>
    <!-- <hr /> -->
    <!-- <router-view /> -->
</template>

<script  lang="ts">


</script>

<style scoped>
.nav {
    height: 4.2rem;
    /* border-bottom: 1px solid #f1f1f1; */
}

.nav > a {
    text-decoration: none;
    color: #797979;
    font-size: 1.15rem;
    padding: 0 1.2rem;
    line-height: 4.2rem;
    /* font-weight: bold; */
}

.nav > a:first-child {
    padding: 0 1.2rem 0 0;
}

.nav > a:hover {
    color: #007fff;
}

@media only screen and (min-width: 1200px) {
    .nav > a {
        padding: 0 0.9rem;
    }
}

@media only screen and (min-width: 992px) {
    .nav > a {
        padding: 0 1rem;
    }
}

@media only screen and (min-width: 798px) {
    .nav > a {
        padding: 0 0.9rem;
    }
}

@media only screen and (max-width: 797px) {
    .nav > a {
        padding: 0 0.2rem;
        font-size: 1rem;
    }

    .nav > a:first-child {
        padding: 0 0.2rem 0 0;
    }
}
</style>